<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8" />
    <title>Common Application - Logon</title>
    <link rel="stylesheet" th:href="@{js/lib/bootstrap/3.3.7/css/bootstrap.min.css}"/>
    <style>
        .form-bg { background:#00b4ef; }
        .form-horizontal { background:#ffffff; padding-bottom:40px; border-radius:15px; text-align:center; }
        .form-horizontal .heading { display:block; font-size:35px; font-weight:700; padding:35px 0; border-bottom:1px solid #f0f0f0; margin-bottom:30px; }
        .form-horizontal .form-group { padding:0 40px; margin:0 0 25px 0; position:relative; }
        .form-horizontal .form-control { background:#f0f0f0; border:none; border-radius:20px; box-shadow:none; padding:0 20px 0 45px; height:40px; transition:all 0.3s ease 0s; }
        .form-horizontal .form-control:focus { background:#e0e0e0; box-shadow:none; outline:0 none; }
        .form-horizontal .form-group i { position:absolute; top:12px; left:60px; font-size:17px; color:#c8c8c8; transition:all 0.5s ease 0s; }
        .form-horizontal .form-control:focus + i { color: #00b4ef; }
        .form-horizontal .glyphicon-question-sign { display:inline-block; position:absolute; top:12px; right:60px; font-size:20px; color:#808080; transition:all 0.5s ease 0s; }
        .form-horizontal .glyphicon-question-sign:hover { color:#000000; }
        .form-horizontal .main-checkbox { float:left; width:20px; height:20px; background:#11a3fc; border-radius:50%; position:relative; margin:5px 0 0 5px; border:1px solid #11a3fc; }
        .form-horizontal .main-checkbox label { width:20px; height:20px; position:absolute; top:0; left:0; cursor:pointer; }
        .form-horizontal .main-checkbox label:after { content:""; width:10px; height:5px; position:absolute; top:5px; left:4px; border:3px solid #ffffff; border-top:none; border-right:none; background:transparent; opacity:0; -webkit-transform:rotate(-45deg); transform:rotate(-45deg); }
        .form-horizontal .main-checkbox input[type=checkbox] { visibility:hidden; }
        .form-horizontal .main-checkbox input[type=checkbox]:checked + label:after { opacity:1; }
        .form-horizontal .text { float:left; margin-left:7px; line-height:20px; padding-top:5px; text-transform:capitalize; }
        .form-horizontal .error { margin-left:7px; line-height:20px; padding-top:5px; text-transform:capitalize; color:#ff0000; }
        .form-horizontal .btn { float:right; font-size:14px; color:#ffffff; background:#00b4ef; border-radius:30px; padding:10px 25px; border:none; text-transform:capitalize; transition:all 0.5s ease 0s; }
        @media only screen and (max-width:479px) {
            .form-horizontal .form-group { padding:0 25px; }
            .form-horizontal .form-group i { left:45px; }
            .form-horizontal .btn { padding:10px 20px; }
        }
    </style>
</head>
<body class="form-bg">
    <div class="form-bg" style="padding:120px 0;">
        <div class="container">
            <div class="row">
                <div class="col-md-6 col-md-offset-3">
                    <form class="form-horizontal" method="post" action="javascript:logon();" id="loginForm">
                        <span class="heading">用户登录</span>
                        <div class="form-group">
                            <input type="text" class="form-control" id="username" name="username" placeholder="用户名或电子邮件"/>
                            <i class="glyphicon glyphicon-user"></i>
                        </div>
                        <div class="form-group help">
                            <input type="password" class="form-control" id="password" name="password" placeholder="密码"/>
                            <i class="glyphicon glyphicon-lock"></i>
                            <a href="#" class="glyphicon glyphicon-question-sign"></a>
                        </div>
                        <div class="form-group">
                            <div class="main-checkbox">
                                <input type="checkbox" value="None" id="checkbox1" name="check"/>
                                <label for="checkbox1"></label>
                            </div>
                            <span class="text">记住我</span>
                            <span class="error"></span>
                            <button class="btn btn-default" type="submit">登录</button>
                            <input type="hidden" th:value='${#httpServletRequest.getParameter("nexturl")}' id="nexturl" name="nexturl" />
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</body>
<script th:inline="javascript">
    document.getElementById("username").focus();
    document.getElementById("username").select(); //选中输入框内的文本

    //登录表单提交
    logon = function() {
        var frm = document.getElementById("loginForm");
        var params = new URLSearchParams();
        params.set("username", frm.username.value);
        params.set("password", frm.password.value);
        fetch("/onez/login", {
            body: params,
            method: "POST",
            headers: {
                "Content-Type": "application/x-www-form-urlencoded; charset=UTF-8"
            }
        }).then(function(response){
            return response.json();
        }).then(function(result){
            var err = document.querySelector("form .error");
            if (result.code === 200) {
                err.textContent = "";
                localStorage.setItem("Authorization", result.data);
                var nexturl = document.querySelector("#nexturl").value;
                if (nexturl === undefined || nexturl === null || nexturl.length === 0) nexturl = [[${#httpServletRequest.getContextPath()}]];
                document.cookie = "token=" + result.data;
                document.location.href = nexturl;
            } else {
                err.textContent = "用户名或密码错误";
                document.getElementById("username").focus();
                document.getElementById("username").select();
            }
        })
    }
</script>
</html>